<template>
  <GoodsDetailsHeader :title="title" />
  <div class="details-container">
    <div class="dc-goods">
      <img class="goods-image" :src="goodsDetails?.image" alt="">
      <p class="goods-title">{{ goodsDetails?.title }}</p>
      <p><span class="goods-price">￥{{ goodsDetails?.price }}.00</span><span class="goods-price-old">￥500</span></p>
    </div>
    <div class="other">
      <span class="s1">快递：免邮费</span>
      <span class="s2">好评率：99%</span>
      <span class="s3">销量：3000</span>
    </div>
  </div>

  <!-- 选择规格 -->
  <div class="gap">
    <ItemComponent :item="item" :image="false" />
  </div>

  <!-- 用户评价 -->
  <div class="comment-container">
    <div class="comment">
      <div class="comment-header">
        <div class="title">用户评价(999+)</div>
        <div class="percent">
          <span class="text-desc">98%好评</span>
          <span class="iconfont icon-jiantouyou"></span>
        </div>
      </div>
    </div>
    <!-- 用户评价需要封装成一组件 -->
    <CommentView :comment="item" v-for="(item, index) in comment" :key="index" />
    <div class="more" @click="onListMore">
      <div>查看更多</div>
    </div>
  </div>

  <!-- footer -->
  <div class="footer">
    <van-action-bar>
      <van-action-bar-icon icon="chat-o" text="客服" />
      <van-action-bar-icon icon="cart-o" text="购物车" />
      <van-action-bar-icon icon="shop-o" text="店铺" />
      <van-action-bar-button type="warning" text="加入购物车" />
      <van-action-bar-button type="danger" text="立即购买" @click="onBuy" />
    </van-action-bar>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted } from "vue"
import { useRoute, useRouter } from "vue-router"

import GoodsDetailsHeader from "../../components/PubHeaderComponent.vue"
import ItemComponent from "../../components/ItemComponent.vue"
import CommentView from "./CommentView.vue"

import { getGoodsDetails,getGoodsComment } from "../../api/Goods/index"
import { getCreateOrder } from "../../api/Order/index"

const route = useRoute()
const router = useRouter()

// ================================= 获取商品详情数据
const title = "商品详情"
const goodsDetails = ref({})

onMounted(async () => {
  let res = await getGoodsDetails({ id: route.params.id })
  if (res.status === 200) {
    goodsDetails.value = res.data.data
  }
})

// ================================= 选择规格
const item = {
  text: "选择规格",
  desc: ""
}

// ================================= 获取商品评价
const comment = ref([])
onMounted(async () => {
  const res = await getGoodsComment({ id: route.params.id })
  if (res.data.status == 200) {
    comment.value = res.data.data
  }
})

// ================================= 查看更多评价
const onListMore = ()=>{
  router.push("/commentList")
}

// 生成一个订单
const onBuy = ()=>{
  // getCreateOrder({
  //   title: goodsDetails.value?.title,
  //   totalFee: goodsDetails.value?.price
  // }).then(res => {
  //   console.log("--res:",res)
  // })

  router.push({
    name: "pay",
    params: { 
      id: route.params.id,
      // orderNo:res.data.data.orderNo 
      orderNo:123456789 
    }
  })
}
</script>
<style lang="less" scoped>
.details-container {
  .dc-goods {
    background: #fff;

    .goods-image {
      width: 100%;
    }

    .goods-title {
      padding: 10px;
      box-sizing: border-box;
      font-size: 14px;
    }

    p {
      padding-bottom: 10px;

      .goods-price {
        padding: 10px;
        box-sizing: border-box;
        font-size: 16px;
        color: #F23D52;
      }

      .goods-price-old {
        padding: 10px;
        box-sizing: border-box;
        font-size: 12px;
        color: #999;
        text-decoration: line-through;
      }
    }

  }

  .other {
    background: #fff;
    display: flex;
    padding: 10px;

    span {
      flex: 1;
      font-size: 12px;
      color: #999;
    }

    .s1 {
      text-align: left;
    }

    .s2 {
      text-align: center;
    }

    .s3 {
      text-align: right;
    }
  }
}

// 选择规格
.gap {
  margin: 5px 0;
}

// 用户评价
.comment{
  background: #fff;
  border-bottom: 1px solid #f3f4f5;
  .comment-header{
    display: flex;
    padding: 10px;
    .title{
      flex: 1;
      font-size: 14px;
      text-align: left;
    }
    .percent{
      flex: 1;
      text-align: right;
      color: #999;
      .text-desc {
        font-size: 12px;
      }
      .iconfont {
        font-size: 12px;
      }
    }
  }
}

.more {
  background: #fff;
  padding: 10px;
  border-top: 1px solid #f3f4f5;

  div {
    text-align: center;
    font-size: 14px;
  }
}
</style>
